<!--
 * @Author: Lu junwen
 * @Date: 2022-04-13 18:09:39
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-05-19 03:55:57
 * @FilePath: \vue-shop-app-customer\src\views\Mine\addAddress.vue
-->
<template>
  <div class="address">
    <div class="title">
      <van-nav-bar
        style="height: 46px; font-size: 12px"
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <van-form ref="form">
        <van-field
          v-model="addressForm.name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="addressForm.tel"
          name="手机号码"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="value"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
        </van-popup>
        <van-field
          v-model="addressForm.address"
          rows="1"
          autosize
          label="详细地址"
          type="textarea"
          placeholder="请输入街道门牌、楼层房间号等信息"
        />
        <!-- <van-cell center title="设为默认地址">
          <template #right-icon>
            <van-switch
              v-model="addressForm.isDefault"
              active-color="#ee0a24"
              inactive-color="#dcdee0"
              size="24"
            />
          </template>
        </van-cell> -->
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            color="linear-gradient(90deg, #f85959, #ffc773)"
            @click="onSave"
          >保存</van-button>
          <van-button
            round
            block
            type="default"
            v-show="$route.query.id"
            @click="onDelete"
            style="margin-top: 18px"
          >删除</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { AddressEdit, Toast } from 'vant';
import { areaList } from '@vant/area-data';
import { mapActions, mapState } from 'vuex';
import { copy } from "@/utils/index.js"
export default {
  components: { AddressEdit, Toast },
  data() {
    return {
      title: this.$route.query.id ? "修改地址" : "新增地址",
      areaList,
      addressForm: {},
      showArea: false,
      value: '',
    }
  },
  methods: {
    ...mapActions('address', ['addAddress', 'updateAddress', 'deleteAddress']),
    onClickLeft() {
      this.$router.go(-1)
    },
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('')
      this.showArea = false;
    },
    onSave() {
      this.$refs.form.validate().then(() => {
        this.addressForm.address = this.value + "," + this.addressForm.address
        if (this.$route.query.id) {
          this.updateAddress(this.addressForm)
        } else {
          this.addAddress(this.addressForm)
        }
        Toast.success("保存成功")
        console.log(this.addressData);
        this.$router.go(-1)
      }).catch(() => {
        //验证失败
      })

    },
    onDelete() {
      this.deleteAddress(this.addressForm)
      Toast.success("删除成功")
        console.log(this.addressData);
        this.$router.go(-1)
    },
    findAddress() {
      if (this.$route.query.id) {
        for (let index = 0; index < this.addressData.length; index++) {
          const element = this.addressData[index];
          if (this.$route.query.id === element.id) {
            this.addressForm = copy(element)
            let str = this.addressForm.address.split(",")
            console.log(str);
            str.shift()
            this.addressForm.address = str.join("")
          }
        }
      } else {
        this.addressForm.isDefault = false
      }
      console.log(this.addressForm);
    },
  },
  computed: {
    ...mapState('address', ["addressData"])
  },
  created() {
    // console.log(typeof this.$route.query.id);
    this.findAddress()
  }
}
</script>

<style lang="scss" scoped>
</style>